<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <span v-if="!editable" style="padding: 8px 0px 8px 8px">{{accountName}}</span>
    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="accountName"
      :fetch-suggestions="querySearch"
      @blur="changeVal"
      @focus="load"
      size="small"
      v-if="editable"
      style="width: 100%"
      @change="change"
      :popper-append-to-body="false"
      @select="handleSelect">
      <template slot-scope="{ item }">
        <div class="name">{{ item.accountName }}</div>
        <span class="addr">{{ item.accountCode }}</span>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
  export default {
    name: "FtBankAccount",
    props: {
      value: {
        type: String
      },
      editable: {
        type: Boolean,
        default: true
      },
      sourceBillId: String,
      bankAccountId: String,
    },
    mounted() {
      this.load()
    },
    data() {
      return {
        account: {},
        accountArr: [],
        accountName: '',
        data: [],
      }
    },
    methods: {
      load() {
        this.$http.get('/joys-rest/lss-customer/custInfo/bankAccount/' + this.sourceBillId).then(resp => {
          this.data = resp.body
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      querySearch(queryString, cb) {
        var restaurants = this.data
        var results = []
        results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.accountName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      change() {
        this.$emit('input', this.accountName)
        this.$emit('change', this.accountName)
      },
      handleSelect(item) {
        this.accountName = item.accountName
        this.$emit('matchedOption', item)
      },
      changeVal() {
        this.$nextTick(() => {
          this.matchAccount(this, this.accountName)
        })
      },
      matchAccount(_this, val) {
        _this.accountArr = _this.data.filter(item => {
          return item.accountName == val
        })
        if(_this.accountArr.length > 1 && _this.bankAccountId != ""){
          _this.accountArr = _this.accountArr.filter(item => {
            return item.accountCode == _this.bankAccountId
          })
          _this.accountName = val
          _this.$emit('matchedOption', _this.accountArr[0])
        } else if (_this.accountArr.length == 1) {
          _this.accountName = val
          _this.$emit('matchedOption', _this.accountArr[0])
        } else {
          _this.accountName = val
          _this.$emit('unmatchedOption', {accountName: _this.accountName})
        }
      },
    },
    watch: {
      value: {
        handler(val){
          let _this = this
          this.matchAccount(_this, val)
          this.change()
        },
        immediate: true
      },
    }
  }
</script>
<style>
  .my-autocomplete.el-autocomplete-suggestion li {
    line-height: normal;
    padding: 7px;
  }

  .my-autocomplete.el-autocomplete-suggestion .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .my-autocomplete.el-autocomplete-suggestion .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .my-autocomplete.el-autocomplete-suggestion.highlighted .addr {
    color: #ddd;
  }

</style>
<style scoped>

</style>

